<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past

require_once ("../utils/config.php");
require_once ("../utils/query.php");

session_start();
if(empty($_SESSION['facebook_id']))
	die("Not logged into facebook.");
$facebook_id = $_SESSION['facebook_id'];//5536417937;

$result = query_select_untold_id($facebook_id);
$registered = false;
if($result) {
	$row = mysql_fetch_assoc($result);
	if($row) {
		$_SESSION['untold_id'] = $row['drupaluid'];
		$registered = true;
	}
}
//$facebook_id = 5536417937;
?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
	<head>
		<link rel="stylesheet" type="text/css" href="css/trade/trade.css" />
		<link rel="stylesheet" type="text/css" href="css/footer/footer.css" />
		<link rel="stylesheet" type="text/css" href="css/lightbox/jquery.lightbox-0.5.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="css/tabs/jquery-ui-1.8.14.custom.css" />
		<link rel="stylesheet" type="text/css" href="css/tabs/jquery-jvert-tabs-1.1.4.css" />
		<link rel="stylesheet" type="text/css" href="css/galleriaGallery/galleria.classic.css" />
		<link rel="stylesheet" type="text/css" href="../css/cardGrid.css" />
		<link rel="stylesheet" type="text/css" href="css/Header/header.css" />
		<style>
			label, input {
				display : block;
			}
			input.test {
				margin-bottom : 12px;
				width         : 95%;
				padding       : 0.4em;
			}
			fieldset {
				padding    : 0;
				border     : 0;
				margin-top : 25px;
			}
			.ui-dialog .ui-state-error {
				padding : 0.3em;
			}
			.validateTips {
				border  : 1px solid transparent;
				padding : 0.3em;
			}
			#tabs {
				height : 780px;
			}
			#vtabs-collection{
				min-height : 238px;
			}
			#vtabs-browse{
				min-height : 238px;
			}
			.carousel .friends{
				float : left;
			}
		</style>
		<script type="text/javascript" src=<?= LIB_JQUERY; ?>></script>
		<script type="text/javascript" src="js/jquery-ui.min.js"></script>
		<script type="text/javascript" src="js/jquery-jvert-tabs-1.1.4.js"></script>
		<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
		<script type="text/javascript" src="js/galleria-1.2.4.min.js"></script>
		<script type="text/javascript" src="js/galleria.classic.min.js"></script>
		<script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="../js/jquery.quicksand.js"></script>
		<script type="text/javascript" src="../js/jcarousellite_1.0.1.pack.js"></script>
		<script>
			function updateCardClickBinding() {
				$('.card').click(function() {
					var cardImageBack = $(this).find('.card_image img').attr('src');
					var cardImageFront = cardImageBack
						.replace(' 3_b',  ' 1_f')
						.replace(' 7_b',  ' 5_f')
						.replace(' 11_b', ' 9_f')
						.replace(' 2_b',  '_f')
						.replace(' 4_b',  ' 3_f')
						.replace('_b',    '_f');
						
					var dialog = $(''.concat(
						'<table>',
							'<tr>',
								'<td>',
									'<img src="', cardImageFront, '" />',
								'</td>',
								'<td>',
									'<img src="', cardImageBack, '" />',
								'</td>',
							'</tr>',
						'</table>'
					));
					
					$.get(cardImageFront, function() {
						dialog.dialog({
							modal     : true,
							resizable : false,
							draggable : false,
							width     : 720,
							buttons   : {
								"Close" : function() { $(this).dialog('close'); }
							}
						});
						//$('div').remove('.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix');
					});
				});
			}
			
			function filterCards(user_id, type) {
				$.post(
					'../ajax/getCards.php',
					{
						fb_id       : user_id,
						type_filter : type
					},
					function(data) {
						$('.cards').quicksand(
							$(data).children('.card'),
							{
								duration  : 700,
								attribute : 'id',
								easing    : 'easeInOutQuad'
							},
							updateCardClickBinding
						);
					}
				);
			}

			$(document).ready(function() {
				var username = $("#username");
				var password = $("#password");
				allFields = $([]).add(name).add(password);
				tips = $(".validateTips");
				
				function updateTips(message) {
					tips.text(message).addClass("ui-state-highlight");
					setTimeout(function() {
						tips.removeClass("ui-state-highlight", 1500);
					}, 500);
				}
				
				function checkLength(object, id, min, max) {
					if(object.val().length > max || object.val().length < min) {
						object.addClass("ui-state-error");
						updateTips("Length of" + id + " must be between " + min + " and " + max + ".");
						return false;
					} else {
						return true;
					}
				}
				
				function checkRegexp(object, regexp, message) {
					if(!(regexp.test(object.val()))) {
						object.addClass("ui-state-error");
						updateTips(message);
						return false;
					} else {
						return true;
					}
				}
				
				//initialize main tabs
				$("#tabs").tabs();
				//initialize vertical tabs for collections tab
				$("#vtabs-collection").jVertTabs({
					equalHeights : true,
					select       : function(index) {
						$('[id="#vtabs-collection-'+index+'"]').append($('.cards'));
						index = ((index==4)?10:((index==5)?20:index));
						filterCards(<?=$facebook_id;?>, index);
					}
				});
				$("#vtabs-browse").jVertTabs({
					equalHeights : true,
					select       : function(index) {
						$('[id="#vtabs-browse-'+index+'"]').append($('.cards'));
						index = ((index==4)?10:((index==5)?20:index));
						filterCards(<?=$facebook_id;?>, index);
					}
				});
				
				$('a.lightbox').lightBox();
				$('a.lightbox2').lightBox();
				$("#gallery").galleria({
					height: 300,
					width:300,
					lightbox: true,
					imagePosition: 'left'
				});
				$("#gallery2").galleria({
					height: 300,
					width:300,
					lightbox: true,
					imagePosition: 'left'
				});
				// initialize dialogs
				$('#dialog-login').dialog({
					autoOpen  : false,
					height    : 400,
					width     : 350,
					modal     : true,
					resizable : false,
					draggable : false,
					buttons   : {
						"Log In" : function() {
							var bValid = true;
							allFields.removeClass("ui-state-error");
							
							bValid = bValid && checkLength(username, "username", 0, 60);
							bValid = bValid && checkLength(password, "password", 0, 128);
							
							bValid = bValid && checkRegexp(username, /^([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, ., -, _, or spaces.");
							//bValid = bValid && checkRegexp(password);
							
							if(bValid) {
								var login_dialog = this;
								$.post(
									"ajax/registerFacebookUser.php",
									{
										drupal_id: username.val(),
										drupal_pw: password.val()
									},
									function(data) {
										if (data.success) {
											$(login_dialog).dialog("close");
											filterCards(<?=$facebook_id;?>, 0);
										} else {
											updateTips("Please enter a valid Untold username and password.");
											bValid = false;
										}
									},
									'json'
								);
							}
						},
						Cancel   : function() {
							$(this).dialog("close");
							location.href = 'test/testList.php';
						}
					},
					close     : function() {
						allFields.val("").removeClass("ui-state-error");
					}
				});
				<? if($registered) { ?>
					filterCards(<?=$facebook_id;?>, 0);
				<? } else { ?>
					$('#dialog-login').dialog('open');
				<? } ?>
				FB.Canvas.setSize();
			});
		</script>
	</head>
	<body>
		<div id="fb-root"></div>
		<script>
			window.fbAsyncInit = function() {
				FB.init({
					appId  : <?=APP_ID?>,
					status : true, // check login status
					cookie : true, // enable cookies to allow the server to access the session
					xfbml  : true  // parse XFBML
				});
				var query = FB.Data.query('SELECT uid, first_name, pic_square FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = {0}) AND is_app_user = 1',
					<?= $facebook_id; ?>);
				query.wait(function(rows) {
					for(var i = 0; i < rows.length; i++) {
						$('.friends ul').append(
							'<li><div id="'+rows[i].uid+'" class="friend" >\
								<a href="#'+rows[i].uid+'" style="background-image:url('+rows[i].pic_square+');">\
									<div>\
										'+rows[i].first_name+'\
									</div>\
								</a>\
							</div></li>'
						);
					}
					$('.friend').click(function() {
						alert($(this).attr('id'));
					});
					$('.friends').jCarouselLite({
						btnPrev : '.prev',
						btnNext : '.next',
						visible : 5,
						circular: false
					});
					$('.footer').insertAfter('#vtabs-browse');
				});
			};
			
			(function() {
				var e = document.createElement('script');
				e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
				e.async = true;
				document.getElementById('fb-root').appendChild(e);
			}());
		</script>
		<div class="unlink"><a href="" style="border:none;"><img src="css/Header/unlink.png" ></a></div>
		<div id="tabs">
			<ul>
				<li><a href="#collection"><span>My Collection</span></a></li>
				<li><a href="#browse"><span>My Friends</span></a></li>
				<li><a href="#trades"><span>Open Trades</span></a></li>
				<li><a href="#store"><span>Store</span></a></li>
				
			</ul>
			<div id="collection">
				<div id="vtabs-collection">
					<div>
						<ul>
							<li><a href="#vtabs-collection-0">All Types</a></li>
							<li><a href="#vtabs-collection-1">Race</a></li>
							<li><a href="#vtabs-collection-2">Aspect</a></li>
							<li><a href="#vtabs-collection-3">Power</a></li>
							<li><a href="#vtabs-collection-4">Minion</a></li>
							<li><a href="#vtabs-collection-5">Bane</a></li>
						</ul>
					</div>
					<div>
						<div id="#vtabs-collection-0" style="min-height:238px;min-width:400px;">
							<ul class="cards"></ul>
						</div>
						<div id="#vtabs-collection-1"></div>
						<div id="#vtabs-collection-2"></div>
						<div id="#vtabs-collection-3"></div>
						<div id="#vtabs-collection-4"></div>
						<div id="#vtabs-collection-5"></div>
					</div>
				</div>
			</div>
			<div id="trades">
				<div class="trade-top" align=center>
					<div id="gallery">
						<img class='card_image' src="prototypeImages/card3.jpg">
						<img class='card_image' src="prototypeImages/card3.jpg">
						<img class='card_image' src="prototypeImages/card3.jpg">
					</div>
				</div>
				<div class="trade-middle-left">
					<div class="cancel">
						<a href="#cancel"></a>
					</div>
				</div>
				<div class="trade-middle-right">
					<div class="accept">
						<a href="#accept"></a>
					</div>
				</div>
				<div class="trade-bottom" align=center>
					<div id="gallery2" style="padding-top:70px;">
						<img src="prototypeImages/card3.jpg">
						<img src="prototypeImages/card3.jpg">
						<img src="prototypeImages/card3.jpg">
					</div>
				</div>
			</div>	
			<div id="browse">
				<div id="vtabs-browse">
					<div>
						<ul>
							<li><a href="#vtabs-browse-0">All Types</a></li>
							<li><a href="#vtabs-browse-1">Race</a></li>
							<li><a href="#vtabs-browse-2">Aspect</a></li>
							<li><a href="#vtabs-browse-3">Power</a></li>
							<li><a href="#vtabs-browse-4">Minion</a></li>
							<li><a href="#vtabs-browse-5">Bane</a></li>
						</ul>
					</div>
					<div>
						<div id="#vtabs-browse-0" style="min-height:238px;min-width:400px;"></div>
						<div id="#vtabs-browse-1"></div>
						<div id="#vtabs-browse-2"></div>
						<div id="#vtabs-browse-3"></div>
						<div id="#vtabs-browse-4"></div>
						<div id="#vtabs-browse-5"></div>
					</div>
				</div>
			</div>
			<div id="store">
			</div>
		</div>
		<div class="carousel footer">
			<a class='left-arrow prev' href='#prev'></a>
			<div class="friends">
				<ul></ul>
			</div>
			<a class='right-arrow next' href='#next'></a>
			<div class='add'>
				<a href='#add'>Add Friends</a>
			</div>
		</div>
	</body>
</html>